<template>
  <div class='capital'>
    <div class='top'>
      <div class='left'>
        <div class="block">
          <span class="demonstration" style='color: #30383e;font-size: 14px;'>时间范围：</span>
          <el-date-picker v-model="ptime" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"></el-date-picker>

        </div>
        <!-- <span></span>
        <div class="block">
          <el-date-picker v-model="endTime" type="date" placeholder="选择日期" style="width: 152px;margin-right: 80px;">
          </el-date-picker>
        </div> -->
        <div class='left_last'>
          <span>当前状态：</span>
          <v-numodule :list='["待审核","审核通过","已驳回"]' ref="status"></v-numodule>
          <button @click='getList'>查询</button>
          <button @click='clear'>重置</button>
        </div>
        <div class='left_last'>
          <button @click='goRouter'>申请提现</button>
        </div>
      </div>

    </div>
    <div class='capital_table'>
      <div class='moddle'>
        <v-table :list='list' :tableData='tableData'></v-table>
      </div>
    </div>
    <div class='bottom'>
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-size="this.limit" prev-text="上一页" next-text="下一页" layout="prev, pager, next, jumper, total" :total="this.total">
        </el-pagination>
      </div>
    </div>
  </div>

</template>
<script>
import table from "../common/table.vue";
import numoudle from "../common/numodule.vue";
import { Message } from "element-ui";
import $ from "jquery";
export default {
  components: {
    "v-table": table,
    "v-numodule": numoudle
  },
  created() {
    this.$parent.flag = true;
    u.setUser(() => {
      this.txflag = true;
    });
  },
  watch: {
    ptime: function(newTime) {
      if (!newTime) return;
      this.startTime = t.gshDate(newTime[0]);
      this.endTime = t.gshDate(newTime[1]);
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    goRouter() {
      if (this.txflag) {
        let user = JSON.parse(localStorage.getItem("userData"));
        if (user.bankNo && user.openBank) {
          this.$router.push({ path: "/WithdrawDeposit" });
        } else {
          return Message({
            message: "请前往个人中心绑定开户银行及个人银行卡号",
            type: "error"
          });
        }
      }
    },
    getList() {
      this.status =
        ["待审核", "审核通过", "已驳回"].indexOf(this.$refs.status.value) + "";
      u.withdrawList(
        {
          limit: this.limit,
          page: this.page,
          status: this.status == "-1" ? null : this.status,
          timeStart: this.startTime,
          timeEnd: this.endTime
        },
        data => {
          if (data && data.code == "200" && data.data.page) {
            this.tableData = [];
            this.total = data.data.page.total;
            this.index++;
            if (!data.data.page.list) return;
            data.data.page.list.forEach((item, index) => {
              var obj = {};
              obj.tda = item.bank;
              obj.tdb = item.openBank;
              obj.tdc = item.bankNo;
              obj.tdd = item.idCard;
              obj.tde = item.cash;
              obj.tdt = item.charg;
              obj.tdf = item.realCash;
              obj.date = item.createTime;
              obj.tdj = ["待审核", "审核通过", "已驳回"][item.status];
              this.tableData.push(obj);
            });
          }
        }
      );
    },
    clear() {
      this.$refs.status.value = "";
      this.status = "0";
      this.startTime = "";
      this.endTime = "";
      this.getList();
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    }
  },
  data() {
    return {
      txflag: false,
      ptime: "",
      index: 0,
      total: 0,
      startTime: null,
      endTime: null,
      page: 1,
      status: "0",
      limit: 10,
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value1: "",
      value2: "",
      tableData: [],
      list: [
        { key: "tda", title: "开户银行" },
        { key: "tdb", title: "银行全名" },
        { key: "tdc", title: "银行卡号" },
        { key: "tdd", title: "证件号" },
        { key: "tde", title: "提现金额" },
        { key: "tdt", title: "手续费" },
        { key: "tdf", title: "实际金额" },
        { key: "date", title: "申请时间" },
        { key: "tdj", title: "状态" }
      ]
    };
  }
};
</script>
<style lang='less' scoped>
@import "../../../static/common/capital.less";
</style>
<style>
.el-date-editor .el-range-input {
  width: 60% !important;
}
.el-date-editor .el-range-separator {
  padding: 0 !important;
}
</style>

